<template>
  <div class="home">
    <nav-bar>
      <div slot="icon-left" class="head-left" @click="back">
        <span class="iconfont">&#xe630;</span>
      </div>
      <div slot="icon-center" class="head-search">
        <span class="iconfont">&#xe615;</span>
        输入城市/景点/
      </div>
      <div slot="icon-right" class="head-right" @click="toCity">
        {{ city }}<span class="iconfont">&#xe639;</span>
      </div>
    </nav-bar>
    <home-swiper :sliderList="sliderList"/>
    <home-icons :iconsList="iconsList"/>
    <home-location />
    <home-trip :tripsList="tripsList"/>
    <home-hot :hotList="hotList"/>
    <home-like :likeList="likeList"/>
    <home-vacation :vacationList="vacationList"/>
  </div>
</template>

<script>
// common中的组件
import NavBar from "@/components/common/navbar/NavBar";
import {mapState} from 'vuex'
// 子组件
import HomeSwiper from "./homePages/HomeSwiper";
import HomeIcons from './homePages/HomeIcons'
import HomeLocation from './homePages/HomeLocation'
import HomeTrip from './homePages/HomeTrip'
import HomeHot from './homePages/HomeHot'
import HomeLike from './homePages/HomeLike'
import HomeVacation from './homePages/HomeVacation'
// 方法类
export default {
  name: "Home",
  data() {
    return {
      sliderList: [], // 保存本地轮播图的数据
      iconsList: [], // 保存本地轮播图的数据
      tripsList: [], // 保存trim数据
      hotList: [], // 保存本地轮播图的数据
      likeList: [], // 保存本地轮播图的数据
      vacationList: [], // 保存本地轮播图的数据
      changeCity: '', // 保存当前city值，后面用于记录数据是否发生过变化
    }
  },
  components: {
    NavBar,
    HomeSwiper,
    HomeIcons,
    HomeLocation,
    HomeTrip,
    HomeHot,
    HomeLike,
    HomeVacation
  },
  computed: {
    ...mapState(['city'])
  },
  methods: {
    back() {
      this.$router.go(1)
    },
    toCity() {
      this.$router.push('/city')
    },
    getHomeInfo() {
      this.$http.get('http://localhost:8080/data/home.json')
      .then((res) => {
        const data = res.data.data
        data.forEach((item,index) => {
          this.vacationList = []
          if(item.city == this.city) {
            this.sliderList = item.sliderList
            this.iconsList = item.iconsList
            this.tripsList = item.tripsList
            this.hotList = item.hotList
            this.likeList = item.likeList
            this.vacationList = item.vacationList
          }
        })
      })
    }
  },
  mounted() {
    this.changeCity = this.city
    this.getHomeInfo()
  },
  activated() {
    if (this.changeCity != this.city) {
      this.getHomeInfo()
      this.changeCity = this.city
    }
  }
}
</script>

<style scoped>
  .home {
    /*width: 100vw;*/
    /*height: 100vh;*/
    background-color: #f5f5f5;
  }
  .head-left {
    width: .88rem;
    text-align: center;
    font-weight: bold;
  }
  .head-search {
    flex: 1;
    height: .6rem;
    margin: .135rem 0;
    border-radius: .1rem;
    background: #fff;
    color: #e4e7ea;
    line-height: .6rem;
    font-size: .26rem;
    padding-left: .1rem;
  }
  .head-right {
    font-size: .28rem;
    padding: 0 .1rem;
  }
</style>
